<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>

<script type="text/javascript" charset="utf-8"
	src="${path }/resource/plugin/beditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${path }/resource/plugin/beditor/ueditor.all.js">
	
</script>
<script type="text/javascript" charset="utf-8"
	src="${path }/resource/plugin/beditor/lang/zh-cn/zh-cn.js"></script>

<style type="text/css">
.ibox-content {
	border: none;
}
</style>
</head>
<body>
	<div id="app">
		<form class="form-horizontal" id="dataform"
			onsubmit="javascripr:return false;">
			<input type="hidden" name="tokenUrl" value="${tokenUrl}"> <input
				type="hidden" name="token" value="${token}">
			<c:if test="${obj ne null }">
				<input type="hidden" name="id" value="${obj.id }">
			</c:if>

			<div class="row">
				<div class="col-sm-6">
					<div class="ibox-content">
						<div class="panel panel-default">
							<div class="panel-heading">基本信息</div>
							<div class="panel-body">
								<div class="form-group">
									<label class="col-sm-2 control-label">产品名称 <span
										class="text-danger">*</span>
									</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" name="name"
											datatype="*1-200"
											value="<c:out value="${obj.name }"></c:out>"
											nullmsg="产品名称不能为空">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">属性设置 </label>
									<input   name="attrs" id="attrs" type="hidden" >
									<div class="col-sm-10">
										<select class="select2 form-control"
											multiple="multiple" id="parentId">
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">简介 </label>
									<div class="col-sm-10">
										<input type="text" class="form-control" name="message"
											datatype="*1-200" ignore="ignore"
											value="<c:out value="${obj.message }"></c:out>"
											nullmsg="简介不能为空">
									</div>

								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">库存 </label>
									<div class="col-sm-4">
										<input type="text" class="form-control" name="stock"
											datatype="*1-200" ignore="ignore"
											value="<c:out value="${obj.stock }"></c:out>"
											nullmsg="库存不能为空">
									</div>

									<label class="col-sm-2 control-label">产品销量 </label>
									<div class="col-sm-4">
										<input type="text" class="form-control" name="saleCount"
											ignore="ignore" datatype="*1-200"
											value="<c:out value="${obj.saleCount }"></c:out>"
											nullmsg="产品销量不能为空">
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-2 control-label">产品价格 </label>
									<div class="col-sm-4">
										<input type="text" class="form-control" name="price"
											datatype="*1-200" ignore="ignore"
											value="<c:out value="${obj.price }"></c:out>"
											nullmsg="产品价格不能为空">
									</div>
									<label class="col-sm-2 control-label">市场价 </label>
									<div class="col-sm-4">
										<input type="text" class="form-control" name="marketPrice"
											ignore="ignore" datatype="*1-200"
											value="<c:out value="${obj.marketPrice }"></c:out>"
											nullmsg="市场价不能为空">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">产品标签 </label>
									<div class="col-sm-4">
										<input type="text" class="form-control" name="lables"
											datatype="*1-200" ignore="ignore"
											value="<c:out value="${obj.lables }"></c:out>"
											nullmsg="产品标签不能为空">
									</div>
									<label class="col-sm-2 control-label">排序 </label>
									<div class="col-sm-4">
										<input type="text" class="form-control" name="sequence"
											datatype="*1-200" ignore="ignore"
											value="<c:out value="${obj.sequence }"></c:out>"
											nullmsg="排序不能为空">
									</div>
								</div>


								<div class="form-group">
									<label class="col-sm-2 control-label">天猫购买 </label>
									<div class="col-sm-4">
										<input type="text" class="form-control" name="tianmao"
											datatype="*1-2000" ignore="ignore"
											value="<c:out value="${obj.tianmao }"></c:out>"
											nullmsg="天猫购买不能为空">
									</div>
									<label class="col-sm-2 control-label">京东购买 </label>
									<div class="col-sm-4">
										<input type="text" class="form-control" name="jd"
											ignore="ignore" datatype="*1-2000"
											value="<c:out value="${obj.jd }"></c:out>" nullmsg="京东购买不能为空">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">淘宝购买 </label>
									<div class="col-sm-4">
										<input type="text" class="form-control" name="taobao"
											datatype="*1-2000" ignore="ignore"
											value="<c:out value="${obj.taobao }"></c:out>"
											nullmsg="淘宝购买不能为空">
									</div>
									<label class="col-sm-2 control-label">苏宁易购 </label>
									<div class="col-sm-4">
										<input type="text" class="form-control" name="suning"
											datatype="*1-2000" ignore="ignore"
											value="<c:out value="${obj.suning }"></c:out>"
											nullmsg="苏宁易购不能为空">
									</div>
								</div>



							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="ibox-content">
						<div class="panel panel-default">
							<div class="panel-heading">SKU</div>
							<div class="panel-body">
								<a class="btn btn-default small " style="margin-bottom: 10px;"
									onclick="addSku()">添加SKU</a>
								<table class="table" id="skutable">
									<tr>
										<c:forEach items="${skus}" var="sku">
											<th>${sku.attrName }</th>
										</c:forEach>
										<th>库存</th>
										<th>价格</th>
										<th>SKU图片</th>
										<th>操作</th>
									</tr>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-sm-6">
					<div class="ibox-content">
						<div class="panel panel-default">
							<div class="panel-heading">产品展示</div>
							<div class="panel-body">
								<a class="btn btn-default small " style="margin-bottom: 10px;"
									onclick="addImgTr()">添加图片</a>
								<table class="table" id="imgtable">
									<tr>
										<th>排序</th>
										<th>选为主图</th>
										<th>图片</th>
										<th>操作</th>
									</tr>
								</table>

							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="ibox-content">
						<div class="panel panel-default">
							<div class="panel-heading">产品详情</div>
							<div class="panel-body">

								<div class="tabs-container">
									<ul class="nav nav-tabs">
										<li class="active"><a data-toggle="tab" href="#tab-1"
											aria-expanded="true"> 产品描述</a></li>
										<li class=""><a data-toggle="tab" href="#tab-2"
											aria-expanded="false">包装及参数</a></li>
										<li class=""><a data-toggle="tab" href="#tab-3"
											aria-expanded="false">产品服务</a></li>
									</ul>
									<div class="tab-content">
										<div id="tab-1" class="tab-pane active">
											<div class="panel-body">
												<script style="width: 100%; height: 500px" id="description"
													name="description" type="text/plain">${obj.description}</script>
											</div>
										</div>
										<div id="tab-2" class="tab-pane">
											<div class="panel-body">
												<script style="width: 100%; height: 500px" id="projPackage"
													name="projPackage" type="text/plain">${obj.projPackage} </script>
											</div>
										</div>
										<div id="tab-3" class="tab-pane">
											<div class="panel-body">
												<script style="width: 100%; height: 500px" id="service"
													name="service" type="text/plain">${obj.service} </script>
											</div>
										</div>
									</div>


								</div>

							</div>
						</div>
					</div>
				</div>
			</div>


			<div class="form-group ">
				<div class="col-sm-12 text-center">
					<a href="javascript:;" onclick="submit()"
						class="btn btn-success radius"><i class="fa fa-check"></i> 保存</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a class="btn btn-danger radius" href="javascript:;"
						onclick="MTools.closeForm()"><i class="fa fa-close"></i> 关闭</a>
				</div>
			</div>
			<input id="albumStr" name="albumStr" value="" style="display: none">
			<input id="skusStr" name="skusStr" value="" style="display: none">
		</form>
	</div>
</body>

<script type="text/html" id="imgtemplate">
<tr id="trId">
	 <td><input type="text" class="form-control" style="width:50px;" name="sequence"></td>
	<td><input type="radio" value="1" name="isMain"></td>
	<td><input  name="img2" id="adImg" class="form-control  upload-input" type="text" /><a></a></td>
	<td><i class="fa fa-trash form-control-static"
		onclick="delThis('trId')"></i></td>
</tr>
</script>


<script type="text/html" id="template">
<tr id="trId">
	<c:forEach items="${skus}" var="sku">
		<td><select class="form-control">
					<option value="-" >请选择SKU值</option>
				<c:forEach items="${sku.childs}" var="skuValue">
					<option value="${skuValue.id}" >${skuValue.attrName}</option>
				</c:forEach>
		</select></td>
	</c:forEach>

	<td><input type="text" class="form-control" name="stock"></td>
	<td><input type="text" class="form-control" name="price"></td>
	<td><input  name="img2" id="adImg"
		class="form-control  upload-input" type="text" /><a></a></td>
	<td><i class="fa fa-trash form-control-static"
		onclick="delThis('trId')"></i></td>
</tr>
</script>

<script type="text/javascript"
	src="${path }/resource/js/systools/MJsBase.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/jquery.serializejson.min.js"></script>

<script type="text/javascript">
	var editor1 = UE.getEditor('description');
	var editor2 = UE.getEditor('projPackage');
	var editor3 = UE.getEditor('service');
	MTools.autoFullSelect();
	$(".select2").select2();
	var invokeUrl = "${path}/do/admin/product/addProduct";
	<c:if test="${obj ne null }">
	invokeUrl = "${path}/do/admin/product/modifyProduct";
	//初始化相册和sku
	initAlbumAndSku();
	</c:if>

	var validform = MValidform.validform("#dataform");
	if (parent.layer.getFrameIndex) {
		layerIndex = parent.layer.getFrameIndex(window.name);
	}

	function getMultiSelectVal(id) {
		return $.map($("#" + id).select2('data'), function(value) {
			return value.id
		}).join(",");
	}
	
	
	function submit() {
		// 验证表单
		if (!validform.check()) {
			return false;
		}
		

		//获取sku和相册信息			
		$("#attrs").val(getMultiSelectVal("parentId"));
		$("#skusStr").val(JSON.stringify(getSkus()));
		$("#albumStr").val(JSON.stringify(getAlbums()));
		var data = $("#dataform").serializeJSON();
		$.ajax({
			type : "post",
			url : invokeUrl,
			contentType : "application/x-www-form-urlencoded",
			data : data,
			async : true,
			success : function(result) {
				// 全局异常处理器发出的错误信息
				if (result.status == "200") {
					layer.closeAll('loading');
					// 关闭iframe层
					parent.myGrid.serchData();
					parent.layer.close(layerIndex);
				} else {
					layer.closeAll('loading');
					layer.msg(result.info, {
						icon : 2,
						time : 5000
					});
					return null;
				}
			}
		});
		return false;
	}

	initFunctionList();

	/*获取sku表格中的参数*/
	function getSkus() {
		var skus = [];
		$("#skutable tbody").find("tr").each(function(i) {
			console.log(i);
			var sku = {};
			if (i != 0) {
				var tds = $(this).find("td");
				var length = tds.length - 1;
				var attrId = "";
				for (var i = 0; i < length - 3; i++) {
					if (i == length - 4) {
						attrId += tds.eq(i).find("select").val();
					} else {
						attrId += tds.eq(i).find("select").val() + ",";
					}
				}
				sku.attrId = attrId;
				sku.stock = tds.eq(length - 3).find("input").val();
				sku.price = tds.eq(length - 2).find("input").val();
				sku.img = tds.eq(length - 1).find("img").attr("src");
				skus.push(sku);
			}
		});

		return skus;
	}

	/**
		获取相册中的图片
	 **/
	function getAlbums() {
		var albums = [];
		$("#imgtable tbody").find("tr").each(function(i) {
			var images = {};
			if (i != 0) {
				var tds = $(this).find("td");
				var length = tds.length - 1;

				images.sequence = tds.eq(0).find("input").val();
				if(MTools.isBlank(images.sequence)){
					images.sequence=i;
				}
				
				images.isMain = tds.eq(1).find("input:radio:checked").val();
				if (images.isMain) {
					images.isMain = 1;
				} else {
					images.isMain = 2;
				}
				images.img = tds.eq(2).find("img").attr("src");

				albums.push(images);
			}
		});

		return albums;
	}

	/**
	 * 初始化文章类型列表
	 */
	function initFunctionList() {
		$.AjaxProxy({
			a : false,
			c : false,
			p : {
				isSku : 1
			}
		}).invoke("${path}/do/admin/productAttrDef/all", function(loj) {
			$("#parentId").createSelectTree(loj.attr("result").rows, {
				id : "id", // 选项的值
				parent : "parentId", // 父节点值
				value : "attrName", // 要显示的名称
				append : false
			});

		});

	}

	function addSku() {
		var imgId = MTools.randomStr();
		var trId = MTools.randomStr();
		$("#skutable").find("tbody").append(
				$("#template").html().replace("adImg", imgId).replace("trId",
						trId).replace("trId", trId));
		MUI.initImgUpload("#" + imgId);
	}

	function addImgTr() {
		var imgId = MTools.randomStr();
		var trId = MTools.randomStr();
		$("#imgtable").find("tbody").append(
				$("#imgtemplate").html().replace("adImg", imgId).replace(
						"trId", trId).replace("trId", trId));
		MUI.initImgUpload("#" + imgId);
	}

	function delThis(node) {
		$("#" + node).remove();
	}
	
	//初始化相册和sku列表
	function initAlbumAndSku(){
		$.AjaxProxy({p:{id:"${obj.id}"}}).invoke("${path}/do/admin/product/findProductAttr",function(loj){
			var mapInfo=loj.getValue("mapInfo");
			initAlbum(mapInfo.albums);
			initSku(mapInfo.skus);
			initAttr(mapInfo.attrs);
		});
	}
	
	function initAttr(attrs){
		var attr=[];
		for(var i=0 ; i<attrs.length ; i++){
			attr.push(attrs[i].attrId);
		}
		console.log(attr)
		$("#parentId").val(attr).trigger("change");
	}
	
	
	function initSku(skus){
		console.log("skulen=====",skus.length)
		for(var c=0 ; c<skus.length ; c++){
			console.log("c",c)
			var sku=skus[c];
			var imgId = MTools.randomStr();
			var trId = MTools.randomStr();
			
			$("#skutable").find("tbody").append(
					$("#template").html().replace("adImg", imgId).replace("trId",
							trId).replace("trId", trId));
			 console.log(sku,"sku");
			var tds = $("#"+trId).find("td");
			var length = tds.length - 1;
			var attrs = sku.attrId.split(",");
			
			for (var i = 0; i < length - 3; i++) {
				var select = tds.eq(i).find("select");
				var options=select.find("option");
				for(var j=0; j<options.length; j++){
					console.log("option value",options.eq(j).val());
					for(var k=0; k<attrs.length; k++){
					//	console.log(options.eq(j).val(),attrs[k],options.eq(j).val()==attrs[k]);
						if(options.eq(j).val()==attrs[k]){
							$(options.eq(j)).attr("selected","selected");
						}	
					}
				}
			}
			tds.eq(length - 3).find("input").val(sku.stock);
			tds.eq(length - 2).find("input").val(sku.price);
			tds.eq(length - 1).find("input").val(sku.img);
			MUI.initImgUpload("#" + imgId);
		}
		
		
	}
	
	function initAlbum(albums){
		for(var i=0 ; i < albums.length ; i++ ){
			var imgId = MTools.randomStr();
			var trId = MTools.randomStr();
			var isMain="";
			if(albums[i].isMain==1){
				isMain='checked="checked"';
			}
			var html=
				'<tr id="'+trId+'">'
				 +'<td><input type="text" class="form-control" style="width:50px;" value="'+albums[i].sequence+'" name="sequence"></td>'
					+'<td><input type="radio" value="1"  '+isMain+' name="isMain"></td>'
					+'<td><input  name="img2" id="'+imgId+'" class="form-control  upload-input" value="'+albums[i].img+'"  type="text" /><a></a></td>'
					+'<td><i class="fa fa-trash form-control-static"	onclick="delThis(\''+trId+'\')"></i></td>'
				+'</tr>';
			$("#imgtable").find("tbody").append(html);
			MUI.initImgUpload("#" + imgId);
		}
	}
	
	
	
	
	
</script>
</body>
</html>